TypeScript学习笔记（一）-静态类型、约束返回类型、约束参数类型Vue3和React都拥抱TypeScript

TypeScript简介与安装

为什么要学习TypeScript？

Vue3和React都拥抱TypeScript
公司的需求
大型项目都基本用Ts

拥抱 TypeScript 是现代前端工程的主流。任何一个前端工程师都需要学习 TS，这有助于拓宽你的知识技能，以及加强自己的专业度和职业背景。

请记住：

1.TypeScript 是 JavaScript 的运行时，带有编译时类型检查器。

2.保持与 JavaScript 相同的运行时行为是 TypeScript 的基本承诺

比如在js中能够访问不存在的属性，在ts中会给出友好的提示

TypeScript 在执行之前检查程序是否存在错误，并根据值的种类执行此操作，使其成为静态类型检查器。

一、安装

 npm install typescript -g

二、初识TypeScript

创建一个Demo1.ts

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

先转为js再运行

这种方法有些麻烦

tsc Demo1.ts //转为 js
node Demo1.js//运行

更简便的方法是安装ts-node

npm install -g ts-node 
ts-node Demo1.ts  //直接编译运行

TypeScript的静态类型

一、静态类型有两种理解方法

指定类型之后不能改变，赋值其他类型就会报错
继承了类型身上的所有属性和方法

let count: number = 1;//必须是number数据类型
// count = 'jsgong';  //报错
count = 2;  //不报错


count.toFixed(12);//继承了Number身上的属性和方法

二、自定义静态类型

//自定义静态类型  
interface XiaoJieJie {
    uname: string,
    age: number,
}

const Xiaohong: XiaoJieJie = {
    uname: '小红',
    age: 18
}

console.log(Xiaohong.age,Xiaohong.uname);

三、接口与类一起使用

由于JavaScript支持类和面向对象编程，因此TypeScript也是如此。可以将接口声明与类一起使用：

interface XiaoJieJie {
    uname: string,
    age: number,
}

class UserAccount {
    uname: string;
    age: number;
    constructor(uname: string, age: number) {
        this.uname = uname;
        this.age = age;
    }
}

const user: XiaoJieJie = new UserAccount('张三', 19);
console.log(user.age,user.uname);

基础静态类型与对象静态类型

一、基本静态类型

null undefined boolean void symbol number string

let n: number = 918;
let myName: string = 'jspang';

二、对象静态类型

普通对象、数组、类、函数对象采用赋值对象的的方式键为属性的名字，值为类型、数组是type[] 函数的返回值是在函数后面加上:type。

//obj
const xiaoJieJie: {
    name: string,
    age: number
} = {
    name: 'tina',
    age: 19
}


const xiaoJieJies: string[] = ['xiao', 'nig', 'dsf'];//数组
console.log(xiaoJieJies);

//类
class Person { }

const dajiao: Person = new Person();

// 普通函数  							返回值
function fn(str:string) :string{
    console.log(str);
    return "3";
}

console.log(fn('nihao'));


//箭头函数
const jianXiaoJieJie: () => string = () => { return '2' };

console.log(jianXiaoJieJie());

既然写ts的类型这么麻烦为什么不直接写js呢？为什么要用这么复杂的TS?

首先搞懂我们写这么复杂的类型是其实为了给vscode编译的，vscode能够快速识别对象中需要的属性和方法，友好的提示很多。打个比方，在js中可以访问不存在的属性的，大不了我可以在控制台看到报错，但是在ts中访问不存在的属性就直接报错。在这里并没有说js不好，ts是也是基于js的。但是如果有一门语言来约束js，甚至可以增强它，让我们的代码更加强壮为什么不用。友好的提示可以让编码更快。

参考资料：# bilibili技术胖--TypeScript从入门到精通视频教程

TypeScript学习笔记 （一）-静态类型、约束返回类型、约束参数类型