TypeScript入门| 青训营笔记

177 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第4天

ts与js的异同

typescript 与 javascripe 的异同

  • 动/静态类型语言

typescript是动态类型,变量只有在执行的时候才知道具体的(在运行时)

javascripe是静态类型, 变量需要提前定义语言类型(在运行前)

  • 强/弱类型语言

typescript是强类型语言: 不同变量之间不能隐式转换

javascripe是弱类型语言: 不同变量之间可以隐式转换

  • TS的优势:基础数据类型:stringnumberbooleannullundefined, 只需要在变量后面使用:type就可以声明类型

    1. 可读性高
    2. 可维护性高(编译的时候处理部分问题), 稳定性好
    3. 支持渐进引入与升级
    4. 兼容JS

基本语法

  • 基础数据类型:stringnumberbooleannullundefined, 只需要在变量后面使用:type就可以声明类型

  • 数组类型的定义有两种方式:

let arr:string[] = ["1","2"];

let arr2:Array<string> = ["1","2"];
定义指定对象成员的数组:
interface Arrobj{
    name:string,
    age:number
}
let arr3:Arrobj[]=[{name:'jimmy',age:22}]
  • 函数类型声明
function sum(x: number, y: number): number {
    return x + y;
}

// 函数表达式
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};
  • 元组: 元组是 TypeScript 中特有的类型,其工作方式类似于数组。

元组最重要的特性是可以限制数组元素的个数和类型,它特别适合用来实现多值返回。

元祖用于保存定长定数据类型的数据

let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error
  • 联合类型 :可以使用类型声明的其中一个
let arr:(number | string)[]; 

arr3 = [1, 'b', 2, 'c'];
  • any: 不指定

  • void: 表示没有任何类型. 当一个函数没有返回值时, 你通常会见到其返回值类型是 void

  • null 和 undefined: undefined和null两者各自有自己的类型分别叫做undefined和null. 和 void相似, 它们的本身的类型用处不是很大;
    默认情况下nullundefined是所有类型的子类型. 就是说你可以把 nullundefined赋值给number类型的变量.

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

const bytedancer: IBytedancer = {
  name: 'liu',
  id: 123,
  sex: 'man',
  hobby: 'play',					// 可有可无
  otherProps: 333,					// 其他属性
};

interface IBytedancer {				// 一般前面加一个I表示接口
  name: string;						// 定义属性
  readonly id: number;				// 只读属性: 在初始化后不能赋值
  sex: 'man' | 'woman' | 'other';	// 限定内容
  hobby?: string;					// 可选属性
  [key: string]: any;				// 其他属性的key必须是string, value随意
}