TypeScript看这一张就够了

TypeScript 是由微软公司在 2012 年正式发布， 现在已经变成了前端必会的一门技能。TypeScript 其实就是 JavaScript 的超集，也就是说 TypeScript 是建立在 JavaScript 之上的，最后都会转变成 JavaScript。这就好比漫威里的钢铁侠，没穿装甲之前，他实力一般，虽然聪明有钱，但还是接近人类。但是有了装甲，他就厉害太多了，甚至可以和神干一架。

全局安装 typeScript

npm install typescript -g
npm install -g ts-node

 

//Demo1.ts

function jspang() {
  let web: string = "Hello World";
  console.log(web);
}

jspang();

// ts-node Demo1.ts

 如果使用了静态类型，不仅意味着变量的类型不可以改变，还意味着类型的属性和方法也跟着确定了。这个特点就大大提高了程序的健壮性，并且编辑器这时候也会给你很好的语法提示，加快了你的开发效率。

const count: number = 1;

interface a{
  name: string;
  age: number;
}

const aa: a= {
  name: "aaa",
  age: 18,
};

function getTotal(one, two) {
  return one + two;
}

const total = getTotal(1, 2);
你必须加一个类型注解，把上面的代码写成下面的样子。

function getTotal(one: number, two: number) {
  return one + two;
}

const total = getTotal(1, 2);

在写 TypeScript 代码的一个重要宗旨就是每个变量，每个对象的属性类型都应该是固定的，如果你推断就让它推断，推断不出来的时候你要进行注释。

给函数的返回值加上类型注解

function getTotal(one: number, two: number): number {
  return one + two;
}

const total = getTotal(1, 2);

有时候函数是没有返回值的，比如现在定义一个sayHello的函数,可以给他一个类型注解void，代表没有任何返回值。

如果一个函数是永远也执行不完的，就可以定义返回值为never，那什么样的函数是永远也执行不完的那?我们先来写一个这样的函数(比如执行执行的时候，抛出了异常，这时候就无法执行完了)。

function errorFuntion(): never {
  throw new Error();
  console.log("Hello World");
}

function add({ one, two }) {
  return one + two;
}

const total = add({ one: 1, two: 2 });


function add({ one, two }: { one: number, two: number }): number {
  return one + two;
}

const three = add({ one: 1, two: 2 });


function getNumber({ one }: { one: number }): number {
  return one;
}

const one = getNumber({ one: 1 });

数组定义

const arr: (number | string)[] = [1, "string", 2];

type Lady = { name: string, age: Number };

const lady : Lady[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];


或者

class Madam {
  name: string;
  age: number;
}

const lady : Madam[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];


元组
const lady : [string, string, number][] = [
  ["dajiao", "teacher", 28],
  ["liuying", "teacher", 18],
  ["cuihua", "teacher", 25],
];

接口的使用： 可选值  ，就是在:号前加一个?

interface Girl {  name: string;  age: number;  bust?: number;}

const screenResume = (girl: Girl) => {
  girl.age < 24   && console.log(girl.name + "进入面试");
  girl.age > 24   && console.log(girl.name + "你被淘汰" + girl.bust) ;
};

const getResume = (girl: Girl) => {
  console.log(girl.name + "年龄是：" + girl.age);
  console.log(girl.name + "Bust是：" + girl.bust);
}; 
const girl = {  name: "你",  age: 18,  bust: 94};

screenResume(girl);
getResume(girl);


 [propname: string]: any;  属性的名字是字符串类型，属性的值可以是任何类型。

类继承中的构造器写法

 

class Person{
    constructor(public name:string){}   //简化写法
}

class Teacher extends Person{
    constructor(public age:number){
        super('jspang')   //偶像致敬
    }
}

const teacher = new Teacher(18)
console.log(teacher.age)
console.log(teacher.name)


在子类中使用构造函数需要用super()调用父类的构造函数
class Person{}

class Teacher extends Person{
    constructor(public age:number){
        super()
    }
}

const teacher = new Teacher(18)
console.log(teacher.age)

tsc --init

如果要想编译配置文件起作用，我们可以直接运行tsc命令，这时候tsconfig.json才起作用

写配置文件时有个坑需要注意，就是配置文件不支持单引号，所以里边都要使用双引号

 

"include":["demo.ts"],

noImplicitAny属性的作用是，允许你的注解类型 any 不用特意表明
  "outDir": "./build" ,
    "rootDir": "./src" ,