typeScript学习小记

ts提供了丰富的语法提示；在编写阶段能够检查错误；

一、安装

# 安装
npm install -g typescript
cnpm install -g typescript
# 检查安装版本
tsc -v 
# 1.1、使用 tsc 命令转成 js 文件
tsc demo.ts
node demo.js

# 1.2、直接运行ts文件可以使用ts-node
安装ts-node
npm install ts-node -g
使用：
ts-node demo.ts

二、语法

• 基础静态类型

# number，string，boolean,null,undefined,symbol
let age:number=18;
let myName:string="1111"
let isDone: boolean = false;
let n: null = null
let u: undefined = undefined; 

• 对象静态类型

//对象、数组、类、函数
const obj:{name:string,age:number}={
    name:'1111',
    age:12
}

const arr:number[]=[1,2] 

class Person{}
let person:Person=new Person()


const myFun:()=>string=()=>{
    return 'hhhh'
}

• 数组

let hd:(string | number | boolean)[]  = []
hd.push('houdunren.com',2010,true)

也可以使用泛型方式声明（泛型的详细使用后面内容会介绍）

let hd:Array<string|number|boolean>  = []
hd.push('houdunren.com',2010,true)

类型注解和类型推断

类型注解：明确给定变量的类型说明，如let age:number=18;

类型推断：未明确给定变量的类型说明。如let a=1;

• 数组类型注释

const arr:number[]=[1,2] 
const arr1:{Name:string,age:number}[]=[
    {Name:'dora', age:18}
]

• 枚举

enum Color {Red = 1, Green = 2, Blue = 4} 
let c: Color = Color.Green;

• 联合类型 union

let num:string | number = 'wwww.com'
num = 2010

• 接口interface

interface IPoint{
    x: number;
    y: number;
    position?:string; //可选属性
}
interface ISetPoint{
    (x: number, y: number):void;
}

//类型扩展
interface IAnimal {
    name: string
}
interface IBear extends IAnimal {
    honey: boolean
}

• 类型别名type

type Point = {
    x: number;
    y: number;
};
type SetPoint = (x: number, y: number) => void;

//类型扩展
type Animal = {
    name: string
}
type Bear = Animal & { 
    honey: boolean 
}
const bear: Bear = {
    name:"bear",
    honey:true
}
//类型别名可以为基本类型、联合类型或元组类型定义别名
type MyNumber = number;
type StringOrNumber = string | number;
type Point2 = [number, number];

type和interface区别

1、类型别名可以为基本类型、联合类型或元组类型定义别名，而接口不行 2、同名接口会自动合并，而类型别名不会

• 泛型

// 1、泛型变量
function Identity<T>(arg: T): T {
    return arg;
}
let output = Identity<string>("myString"); 
let output2 = Identity("myString");

// 2.2、泛型接口
interface IdentityFn{
    <T>(arg:T):T
}
let myIdentity3:IdentityFn=Identity

// 2.3、泛型接口传参
interface IdentityFn2<T>{
    (arg:T):T
}
let myIdentity4:IdentityFn2<string>=Identity

// 3、泛型类
class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

console.log(myGenericNumber.add(myGenericNumber.zeroValue,3));

// 泛型约束
type arrLen={
    length:number
}
function loggingIdentity<T extends arrLen>(arg: T): T {
    console.log(arg.length);  // Error: T doesn't have .length
    return arg;
}
// 在泛型约束中使用类型参数
function getProperty<T,K extends keyof T>(obj: T, key: K) {
    return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, "a"); // okay
getProperty(x, "m"); // error: Argument of type 'm' isn't assignable to 'a' | 'b' | 'c' | 'd'.

参考：

www.tslang.cn/docs/handbo…

doc.houdunren.com/typescript/…

泛型工具类型

• typeof 关键词除了做类型保护，还可以推出类型

let p1 = {
    name: "dora",
    age: 18,
    gender: "female",
};
type People = typeof p1;
function getName(p: People): string {
    return p.name;
}
getName(p1);

• keyof 可以用来获取一个对象接口中的所有 key 值

interface Person {
  name: string; 
  age: number; 
  gender: "male" | "female"; 
} 
type PersonKey = keyof Person; //type PersonKey = 'name'|'age'|'gender';

内置工具类型

• Required

将类型的属性变成必选

interface Person {
    name?: string,
    age?: number,
}

const user: Required<Person> = {
    name: "dd",
    age: 18,
}

• Partial

与 Required 相反，将所有属性转换为可选属性

interface Person {
    name: string,
    age: number,
}

const user: Partial<Person> = {
    name: "dd",
    // age: 18,
}

• Record

Record<K extends keyof any, T> 的作用是将 K 中所有的属性的值转化为 T 类型。

type Property = 'key1'|'key2'
type Person = Record<Property, string>;

const p: Person = {
  key1: "hello",
  key2: "world",
};

• ReturnType

用来得到一个函数的返回值类型

type Func = (value: string) => string;
const testFn: ReturnType<Func> = 'string类型初始化';