• 0

  • 510

TypeScript入门这篇不够!!!

1个月前

一、安装

全局安装typescript(默认你已经安装了node)

npm install -g typescript
复制代码

安装完了以后,就可以使用typescript进行开发了

// demo.ts
function demo01()
{
  let test: string = 'a test typescript';
  console.log(test)
}
demo01()
复制代码

typescript结尾的.ts文件是不能直接运行的,需要编译为.js结尾的文件才能运行

编译方式:

// 先编译为js文件

// 编译
tsc demo.ts
// 执行
node demo.js

// 使用ts-node插件的方式直接执行.ts文件
npm install -g ts-node
ts-node demo.ts // 直接运行ts文件
复制代码

二、静态类型

// demo2.ts
const count : number = 1;
复制代码

这里定义了count变量,这里的: number就是定义了一个静态类型。 

注意⚠️:静态变量的类型不可以改变,但是值是可以改变的。

自定义静态类型

...
interface Demo {
  name: string;
  age: number;
}

let demo : Demo = {
  name: '23',
  age: 23
}
console.log(demo);...
复制代码

三、数据类型

基础数据类型:numberstringbooleannullundefinedsymbol

对象类型:对象、数组、类、函数

Number

TypeScript 里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量,TypeScript 还支持 ECMAScript 2015 中引入的二进制和八进制字面量。

let num : number = 11111;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
复制代码

String

let str : string = '这是string基础静态类型';
let str1 : string = "这是基础数据类型";
复制代码

Boolean

let bool : boolean = true;
复制代码

Null

let nul : null = null;
复制代码

Undefined

let unde : undefined = undefined;
复制代码

Symbol

let sym : symbol = Symbol('foo');
let sym1 : symbol = Symbol(123);
复制代码

对象

let obj : {
  user: string,
  age: number,
  sex: boolean
} = {
  user: 'xiaoming',
  age: 26,
  sex: true
}
console.log(obj) // { user: 'xiaoming', age: 26, sex: true }
复制代码

数组

TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。 第一种,可以在元素类型后面接上 [],表示由此类型元素组成的一个数组

// 直接[]方式
let arr : Object[] = [null, undefined, 0, '123', true];
let arr1 : String[] = ['null', 'undefined', '0', '123', "true"];
console.log(arr) // [ null, undefined, 0, '123', true ]
console.log(arr1) // [ 'null', 'undefined', '0', '123', 'true' ]

// 数组范型, Array<元素类型>

const arr3: Array<string> = ['str', 'strr', 'strrr'];
复制代码

函数

let func : () => string = () => '小明' // es6箭头函数
console.log(func) // [Function: func]
复制代码

class Person {}

let per : Person = new Date(); // new Date() 也是可以,并没有报错
const per1 : Person = new Person();
console.log(per) // 2020-09-16T11:23:19.698Z
console.log(per1) // Person {}
复制代码

enum枚举

// dmeo.ts
enum Color {Red, Green, Blue}
let c: Color = Color.Green
let r: Color = Color.Red
let b: Color = Color.Blue

// demo.js
var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
var c = Color.Green;
var r = Color.Red;
var b = Color.Blue;
console.log(c, b, r);

console.log(Color) // { '0': 'Red', '1': 'Green', '2': 'Blue', Red: 0, Green: 1, Blue: 2 }
console.log(c, b, r) // 1 2 0 r是0,是因为默认是从0开始

// key、value简直是你中有我,我中有你,这就是枚举
//-----------------------------------------------
// 修改起始顺序
enum Colors {Pink = 1, Yellow, Purple}
let p: Colors = Colors.Pink
let y: Colors = Colors.Yellow
let p1: Colors = Colors.Purple
console.log(p,y,p1) // 1 2 3
console.log(Colors)
/*{
  '1': 'Pink',
  '2': 'Yellow',
  '3': 'Purple',
  Pink: 1,
  Yellow: 2,
  Purple: 3
}*/

// 对应的js
var Colors;
(function (Colors) {
    Colors[Colors["Pink"] = 1] = "Pink";
    Colors[Colors["Yellow"] = 2] = "Yellow";
    Colors[Colors["Purple"] = 3] = "Purple";
})(Colors || (Colors = {}));
var p = Colors.Pink;
var y = Colors.Yellow;
var p1 = Colors.Purple;
console.log(p, y, p1); // 1 2 3
console.log(Colors);

//-----------------------------------------------

// 修改没个值
enum Job {Fe = 12, Php = 1, Java = 4}
let f: Job = Job.Fe;
let p3: Job = Job.Php;
let j: Job = Job.Java;
let fe: string = Job[12];
let php: string = Job[1];
let java: string = Job[4];

console.log(f,p3,j,fe,php,java) // 12 1 4 Fe Php Java
console.log(Job) // { '1': 'Php', '4': 'Java', '12': 'Fe', Fe: 12, Php: 1, Java: 4 }
/*

*/

// 对应的js
var Job;
(function (Job) {
    Job[Job["Fe"] = 12] = "Fe";
    Job[Job["Php"] = 1] = "Php";
    Job[Job["Java"] = 4] = "Java";
})(Job || (Job = {}));
var f = Job.Fe;
var p3 = Job.Php;
var j = Job.Java;
var fe = Job[12];
var php = Job[1];
var java = Job[4];
console.log(f, p3, j, fe, php, java); // 12 1 4 Fe Php Java
复制代码

以上就是枚举的举例,同理,我是不是可以理解下面对于js来说就是枚举🤔️?

{
    4: 'java',
    34: 'php',
    2: 'js'
}
复制代码

Any

有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

// 下面是官网的例子,但是报错(这就很迷茫了😂)
let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed();

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

// 当你只知道一部分数据的类型时,any类型也是有用的。 比如,你有一个数组,它包含了不同的类型的数据
let list: any[] = [1, true, "free"];
list[1] = 100;
复制代码

Nerver

never类型表示的是那些永不存在的值的类型。 例如, never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型; 变量也可能是 never类型,当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型,也可以赋值给任何类型;然而,

没有

类型是never的子类型或可以赋值给never类型(除了never本身之外)。 即使 any也不可以赋值给never

下面是一些返回never类型的函数:

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}
复制代码

Object

object表示非原始类型,也就是除numberstringbooleansymbolnullundefined之外的类型。

使用object类型,就可以更好的表示像Object.create这样的API。例如:

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error
复制代码

类型断言

// 第一种尖括号的方式
let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

// 第二种as方式
let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;
复制代码

注意⚠️:当你在TypeScript里使用JSX时,只有 as语法断言是被允许的

四、类型注释和类型推断

类型注释

这种就是类型注释

let count : number = 23;
复制代码

类型推断

不写数据需要的类型,但是系统字段推断为number类型,这就是类型推断。在这里,没写类型注释,但是ts依然识别出count1是number类型,就好比反推,这种情况叫做类型推断。

let count1 = 24;
复制代码

写不写类型注释,根据业务自身去确定,比如计算2个数的和,如果不写注释传入字符串的话就是拼接了,所以要灵活根据业务自身去确定写不写类型注释。

// 这里是计算功能,是需要写的,否则就是字符串的拼接功能了。
function sumTwo(one : number, two : number)
{
  return one + two;
}
console.log(sumTwo(2,3)); // 5
// console.log(sumTwo('2','3')); // 报错
复制代码

五、函数参数和返回类型定义

参数

基础数据类型

// 2个简单的例子,其他的类似

function echo(str : string)
{
  console.log(str)
}
function echo1(bool : boolean)
{
  console.log('打印的值是:' + (bool ? '真' : '假的'));
}
echo('he is a huamen'); // he is a huamen
echo1(true); // 打印的值是:真
echo1(false); // 打印的值是:假的
复制代码

对象类型

// 参数是数组
function echo2(str3 : Object [])
{
  console.log(str3)
}

// 参数是对象
function echo3({one, two} : {one: string, two: string})
{
  console.log(one + two)
}

// 参数是函数
function echo4(str : () => "33") {
  str()
}

// 参数是类
function echo5(time : Date) {
  console.log(time.getTime())
}

echo2([null, undefined, 0, true]); // [ null, undefined, 0, true ]
echo3({one: '3', two: '55'}); // 355
echo4(function () {
  return '33';
}); // undefined
echo5(new Date()); // 1600256196949
复制代码

返回值

无返回值

函数无返回值,给函数增加类型注释void即可

function echo6() : void {
  console.log('这个函数是没返回值')

  // return 3333; // 直接报错Type 'number' is not assignable to type 'void'.
}
echo6();
复制代码

基础基础数据类型

function echo7(num : number) : boolean
{
  return num > 0;
}

console.log(echo7(9)); // true
console.log(echo7(-23)); // false
复制代码

对象类型

// 下面是返回个string类型的数组,其他的类似
function echo8() : string[] {
  return ['1', '2', 'str', 'num'];
}
console.log(echo8()) // [ '1', '2', 'str', 'num' ]
复制代码

六、数组类型

简单类型

let arr : string[] = ['1','3', 'erder', 'sfesrfre'];
console.log(arr) // [ '1', '3', 'erder', 'sfesrfre' ]
复制代码

一般api返回的都是数组或者对象,因此如何定义对象类型是个重点!!!

// 如下看起来可以解决, 但是不够通用,再来一个同样的数组,那定义的类型就要在写一遍,由此ts为我们准备一个概念:类型别名(定义的时候要以type关键字开始)!
// 这里的类型:类型别名、接口、类都是可以解决的!
let arr1 : {user: string, age: number}[] = [
  {user: 'x', age: 23},
  {user: 'y', age: 24},
];

console.log(arr1) // [ { user: 'x', age: 23 }, { user: 'y', age: 24 } ]
复制代码

数组包含多种类型

const xiaojiejie1 : (string | number)[]  = ['dajiao',28, 'teacher'] // 不是元组,不能定位到每个元素的类型,调换顺序不会报错。
复制代码

类型别名

以关键字type开始

// 类型别名
type male = {
    name: string,
    age: number
}

// 接口
interface female {
  user: String;
  age: Number;
}

// 类
class Demo {
  name: string
  age: number
};

let arr2 : male[] = [
  {name: 'aaa', sex: true},
  {name: 'bbb', sex: true},
  {name: 'ccc', sex: !!'true'}
]
console.log(arr2)

let arr3 : female[] = [
  {user: 'abbb', age: 23},
  {user: 'accc', age: 24},
  {user: 'addd', age: 26}
]
console.log(arr3)

let arr4 : Demo[] = [
  {name: 'xiaoming', age: 23},
  {name: 'xiaoshi', age: 23},
  {name: 'xiaohong', age: 23},
  {name: 'xiaoguang', age: 23}
]
console.log(arr4)
复制代码

七、元组

const xiaojiejie : [string,string ,number]  = ['dajiao','teacher',28]
// 这就是一个元组,定义了每个字段的类型,如果顺序变化了,就会报错。
// 这是一个多维数组的元组
const xiao3 : [string, string, number][] = [
  ['x', 'te', 3],
  ['x', 'te', 3],
  ['x', 'te', 3],
  ['x', 'te', 3],
]
console.log(xiao3) // 
复制代码

八、interface接口

定义

// 定义一个函数
const findXiao = (name: string, age: number, must: number) => {
    age < 24 && must > 90 && console.log('录取')
    age > 24 && must < 90 && console.log('淘汰')
}
const xiao = {name: '老谢', age: 21, must: 99}
const xiao1 = {name: '老谢', age: 89, must: 09}
findXiao('辣蟹', 21, 99) // 录取
复制代码

同样的问题,每次都写的话,人要累死了😢

// 提取为interface
interface Gril {
  name: string;
  age: number;
  must: number;
}

const xiao = {name: '老谢', age: 21, must: 99}
const xiao1 = {name: '老谢', age: 89, must: 09}

const findXiao1 = (gril : Gril) => {
  gril.age < 30 && gril.must > 90 && console.log("预录取")
  gril.age > 30 && gril.must < 90 && console.log("预不录取")
}
findXiao1(xiao) // 预录取
findXiao1(xiao1) // 预不录取
复制代码

interface和类型别名区别

类型别名是可以直接给类型,比如:type Gril = string;

interface必须是对象

接口非必选值定义

interface Gril1 {
  name: string;
  age: number;
  must: number;
  leg ?: string; // 接口非必选值定义
}

const findXiao2 = (gril : Gril1) => {
  gril.age < 30 && gril.must > 90 && console.log("预录取")
  gril.age > 30 && gril.must < 90 && console.log("预不录取")
  gril.leg && console.log('我看到你的大长腿了')
}

const xiao2 = {name: '老谢', age: 89, must: 09, leg: "haha"}
findXiao2(xiao2)
// 预不录取
//我看到你的大长腿了
复制代码

接口增加任意参数和方法

interface Gril2 {
  name: string;
  age: number;
  must: number;
  leg ?: string; // 接口非必选值定义
  [propname:string] : any; // 允许加入任意值,不像上面的那么严格
  say(): string; // 增加了一个say方法,返回值是string类型
}
复制代码

类继承接口(implements)

class Xiao3 implements Gril2 {
  name = 'zhy'
  age = 23
  must = 99
  say() {
    return this.name
  }
}
console.log(new Xiao3()) // Xiao3 { name: 'zhy', age: 23, must: 99 }
复制代码

接口继承接口(extends)

interface Xiao4 extends Gril2{

}
复制代码

九、类

定义

class Lady {
  content = 'say hi'
  say() {
    return this.content
  }
}

const xiaohong = new Lady();
console.log(xiaohong.say()) // say hi
复制代码

继承和方法重写

super关键字支持使用父类的方法,但是不能使用属性

class Zhang extends Lady {
  say() {
    return '这里是Zhang的重写';
  }

  walk() {
    console.log('1111111111super', super.say()) // 方法是可以的
    // console.log('1111111111super', super.content) // 报错,属性不行
    return '边走鞭炮';
  }
}

const xiaozhang = new Zhang();
console.log(xiaozhang.content) // say hi
console.log(xiaozhang.say()) // 这里是Zhang的重写
console.log(xiaozhang.walk()) // 1111111111super say hi
复制代码

super使用父类的方法

访问限制符public,protected,private

public: 类的内部和外部都可以访问

protected:类的内部和子类可以访问

private: 只能在自己本类内部访问

class Person {
  public name : string
  public say() {
    return this.name
  }
}
const zhy = new Person();
zhy.name = 'haiyang';
console.log(zhy.say()) // haiyang

class Person1 {
  protected name : string = 'yangyang'
  public say() {
    return this.name
  }
}
const zhy1 = new Person1();
// zhy1.name = 'haiyang'; // 报错,Property 'name' is protected and only accessible within class 'Person1' and its subclasses.
console.log(zhy1.say()) // yangyang

class Person2 extends Person1 {
  public walk() {
    return this.name
  }
}
const zhy2 = new Person2()
console.log(zhy2.walk()) // yangyang

class Person3 {
  private name : string = 'haihai'
  public say() {
    return this.name
  }
}
const zhy3 = new Person3();
// zhy3.name = 'haiyang'; // 报错,Property 'name' is private and only accessible within class 'Person3
console.log(zhy3.say()) // haihai

class Person4 extends Person3{
  walk() {
    // return this.name //报错, 09_calss.ts:78:17 - error TS2341: Property 'name' is private and only accessible within class 'Person3'.
  }
}
const zhy4 = new Person4()
console.log(zhy4.walk()) // undefined
复制代码

构造函数

class Now{

}

class Chl extends Now {
  constructor() {
    super() // 报错才补的
    //因为没写super(),所以报错了, Constructors for derived classes must contain a 'super' call.
    console.log(1111)
  }
}
const c = new Chl();
复制代码

getter,setter,static用法

1. gettersetter都是属性,只是形式函数

2. 属性的名字可以是随意的,你自己知道对应的意思就好 

class Xie {
  constructor(private num_age : number) {

  }

  // 属性的名字是随意的,此时看着是方法,但对于类来说只是一个属性
  set name(age : number) {
    this.num_age = age
  }

  get age() {
    return this.num_age
  }
}

const xiaoxie = new Xie(32)
console.log(xiaoxie.age) //32  注意是属性!!!
xiaoxie.name = 4444 // 注意是属性!!!
console.log(xiaoxie.age) // 4444 上面改变了年龄

/*
1\. 静态属性和方法只是不应实例化类,而类可以直接调用
*/

class StaticClass {
  name = 'zhy'
  static age = 23
  say() {
    console.log('我不是static的方法')
  }
  static walk() {
    console.log('我是static,并且可以在外部使用的方法')
  }
}
console.log(StaticClass.name) // StaticClass 这个应是固有的属性,获取方法名字
console.log(StaticClass.age) // 23
// console.log(StaticClass.say()) // 不可以访问,会报错
console.log(StaticClass.walk()) // 我是static,并且可以在外部使用的方法
复制代码

只读属性和抽象类

只读属性

关键字readonly

class Person10 {
    public readonly _name :string;
    constructor(name:string) {
        this._name = name;
    }
}

const person10 = new Person10('demo')
// person10._name= '谢广坤'  // 报错,Cannot assign to '_name' because it is a read-only property.
console.log(person10._name) // demo
复制代码

抽象类

1. 关键字abstract定义类 

2. 抽象方法不能有方法体 

3. 子类必须实现抽象方法 

4. 抽象类里面可以有其他正常类的属性和方法(根据php推出)

abstract class Girl{
    abstract skill()  //因为没有具体的方法,所以我们这里不写括号

}
class Waiter extends Girl{
    skill(){
        console.log('大爷,请喝水!')
    }
}

class BaseTeacher extends Girl{
    skill(){
        console.log('大爷,来个泰式按摩吧!')
    }
}

class seniorTeacher extends Girl{
    skill(){
        console.log('大爷,来个SPA全身按摩吧!')
    }
}

abstract class Girl{
    name = 'zhy'
    say() {
      return 333;
    }
    abstract skill()  //因为没有具体的方法,所以我们这里不写括号

}
复制代码
免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

php

510

相关文章推荐

未登录头像

暂无评论