TypeScript入门|青训营笔记

米迦
39 阅读3分钟

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

TypeScript发展历史

  • 2012-10:微软发布了 TypeScript第一个版本 (0.8)
  • 2014-10: Angular 发布了基于 TypeScript的2.0版本
  • 2015-04:微软发布了Visual Studio Code
  • 2016-05: @types/react发布，TypeScript可开发 React
  • 2020-09: Vue 发布了3.0版本，官方支持TypeScript
  • 2021-11: v4.5版本发布

#为什么什么是TypeScript

image.png

动态类型语言和静态类型语言两者的区别就在于对类型的检查是在编译期还是在运行期，满足前者就是静态类型语言，反之是动态类型语言。

说的再直白一点就是，静态类型语言是判断变量自身的类型信息；动态类型语言是判断变量值的类型信息，变量没有类型信息，变量值才有类型信息，这是动态语言的一个重要特征。

image.png

对比

TypeScript JavaScript JavaScript 的超集用于解决大型项目的代码复杂性 一种脚本语言，用于创建动态网页 可以在编译期间发现并纠正错误 作为一种解释型语言，只能在运行时发现错误 强类型，支持静态和动态类型 弱类型，没有静态类型选项 最终被编译成 JavaScript 代码，使浏览器可以理解 可以直接在浏览器中使用 支持模块、泛型和接口 不支持模块、泛型或接口 支持 ES3，ES4，ES5 和 ES6+功能 不支持编译其他 ES3，ES4，ES5 或 ES6+ 功能 社区的支持仍在增长，而且还不是很大 大量的社区支持以及大量文档和解决问题的支持

TypeScriptJavaScript
JavaScript 的超集用于解决大型项目的代码复杂性一种脚本语言，用于创建动态网页
可以在编译期间发现并纠正错误作为一种解释型语言，只能在运行时发现错误
强类型，支持静态和动态类型弱类型，没有静态类型选项
最终被编译成 JavaScript 代码，使浏览器可以理解可以直接在浏览器中使用
支持模块、泛型和接口不支持模块、泛型或接口
支持 ES3，ES4，ES5 和 ES6+功能不支持编译其他 ES3，ES4，ES5 或 ES6+ 功能
社区的支持仍在增长，而且还不是很大大量的社区支持以及大量文档和解决问题的支持

基础数据类型

js和ts代码对比

image.png

const bytedancer:IBytedancer = {jobId: 9303245,
name: "Lin ',
sex: 'man ' ,age: 28,
hobby: 'swimming' ,}
interface IBytedancer {上7713
/*只读属性:约束属性不可在对象初始化外赋值
*/readonly jobId: number;
name: string;
sex:'man'|'woman'| 'other';age: number;
/*可选属性:定义该属性可以不存在*/
hobby?: string;
/*任意属性:约束所有对象属性都必须是该属性的子类型*/
[key: string]: any;
}

image.png

函数类型

function add(x,y){
    return x +y;
}
const mult = (，)=→>X*y;


function add(x: number, y: number): number {
    return x + y;
}
const mult:(x: number,y: number) => number= (x,y)=>x*y;

interface IMult i(x: number, y: number): number;}
const mult: IMult = (x,y)>*y;

函数重载

/*对getDate函数进行重载，timestamp为可缺省参数*/
function getDate(type: 'string', timestamp?: string): string;
function getDate(type: 'date', timestamp?: string): Date;
function getDate(type: 'string' | 'date', timestamp?: string): Date | string {
const date = new Date(timestamp);
return type == 'string' ? date.toLocaleString() : date;
const x = getDate( 'date');// x: Date
const y = getDate( 'string' , '2018-01-10');//y: string

数组元素

/*「类型+方括号」表示*/type IArr1 = number[];/*泛型表示*/
type IArr2 = Array<string | number | Record<string,number>>;/*元祖表示*/
type IArr3 =[number, number,string,stringl ;/*接口表示*/
interface IArr4 {[key: number]: any:}
const arr1: IArr1 = [1，2,3，4，5,6];
const arr2: IArr2 = [1，2，'3','4', { a: 1 }]const arr3: IArr3 = [1,2，'3','4'];
const arr4: IArr4 = [ 'string', ()=>null,{},[]];
avatar
文章
阅读
粉丝