Historical review:

  • [VUE series] Image clipping plug-in VUe-Cropper, source code interpretation
  • [VUE series] From the interpretation of publish and subscribe mode to the implementation of vUE responsive principle (including VUe3.0)
  • 【 VUE series 】 Gracefully generate dynamic forms with VUE (I)
  • 【 VUE series 】 Gracefully generate dynamic forms with VUE (2)
  • Vue series: Vue-DevTools you don’t know
  • Vue series vUE – Router source code analysis
  • [VUE series] In-depth understanding of VUex
  • 【 VUE series 】 VUE and EChats combine spring, vUE plug-in Vechart
  • Vue series ESLint is configured for the vue2. X project
  • [VUE series] Vue2. X project configures Mocha unit test
  • [VUE series] Two pictures, figure out the diff algorithm, really sweet ah!
  • [VUE series] Lazy loading of vue-Router routes occurs when element-UI is introduced on demand
  • Vue series the correct way to encapsulate common popover components
  • [VUE series] Develop components, package into VUE plug-ins, write documents, configure GH-Pages branch demo, release NPM package one stream

background

When entering a new team, it is necessary to quickly understand the new business. While understanding the new business, the project is one of them. The new team uses TS development uniformly. I only read the official website once before, lacking practical experience. Although I had developed several pages in the company before the holiday, I was not proficient in TS. Work to good things will first sharpen its tools, just take advantage of the holiday TS from beginning to end in a again.

To be honest, learning TypeScript is a trend. The new Vue3 was written by TS, and it’s recommended that you develop in TypeScript. With that said, let’s get started with TypeScript.

Preparing for the Compilation Environment

Prepare the TypeScript compilation environment and install TypeScript and TS-Node globally. TSC *.ts compiles *.ts to *.js. If we want to execute compiled *.js in a Node environment, we can use ts-node *.ts. Tsc-init generates the tsconfig.json file.

npm install -g typescript ts-node
Copy the code

The static type

// Base static type const count: number = 1024; Const myCat: string = 'heibao' // Static type const heibao: {name: string, age: number} = {name: 'heibao ', age: } // const arrs: string [] = [' all elements inside array are string ']; // class Cat{} const heiBao: Cat = new Cat() const FNC: ()=>string = ()=> {return 'this is a function, the return value must be a string'} function add({one, two}: {one: number, two: number}):number { return one + two } const total = add({one: 1, two: 2})Copy the code

Array type annotation method

Common ways to define arrays, and different ways to write type aliases and class aliases.

Const numberArr: number[] = [1,2,3]; const stringArr: string[] = ['a', 'b', 'c']; / / an array of elements in a variety of types of const arr: (number | string | undefined) [] = [1, "string", undefined] / / in the array element is a const object type xiaohei: {name: string, age: number}[] = [ { name: 'xiaohei', age: 3 }, { name: 'xiaojiugui', age: Cat = {name: string, age: number} const cats: Cat[] = [{name: string] 'xiaohei', age: 3}, {name: 'xiaojiugui', age: 1.5}] age: number; } const cats: Cat2[] = [{name: 'xiaohei', age: 3}, {name: 'xiaojiugui', age: 1.5}];Copy the code

Tuple usage and type constraints

// Const heihei: [string, string, number] = ['heibao', 'cat', 3] [string, string, number][] = [ ['heibao', 'cat', 3], ['heibao', 'cat', 3], ['heibao', 'cat', 3] ]Copy the code

Interface interface

An interface is a constraint in the development environment. Different classes can have common features. In this case, you can extract features into interfaces and implement them using the implements keyword.

interface Cat { name: string; age? : number; / /? Optional value SAY (): string; [propName :string]: any; Class Xiaohei implements Cat {name: 'jiugui'; Say () {return "meow ~"}; Eat () {console.log(' cat food ')}; }Copy the code

Federated types and type containment (type daemon)

interface Cat() { say() {} } interface Dog() { jump() {} } // as function judgeWho(animal: Cat | Dog) { if(animal.say) { (animal as Cat).say() } else { (animal as Dog).jump() } } // in function judgeWho2(animal:  Cat | Dog) { if('say' in animal) { (animal as Cat).say() } else { (animal as Dog).jump() } } // typeof function add(first: string | number, second: string | number) { if(typeof first === 'string' || typeof second === 'string') { return `${first}${second}` } return First + second} class NumberObj {count: number; } function addObj(first: object | NumberObj, second: object | NumberObj) { if(first instanceof NumberObj && second instanceof NumberObj) { return first.count + second.count } return 0; } // As type props: {callback: {required: true, type: Function as PropType<(nums: number) => void>}, message: {type: String, required: true } }Copy the code

Enumerated type

Eunm is in the form of a Map object and can be used for reverse lookup.

The generic

A generic type that supports type inference.

Function myFun<T>(params: Array<T>) {return params; } myFun<string>(['123', '456']) function myFun2<T>(params: T[]) { return params; } myFun2<string>(['123', '456']) class SelectCat {constructor(private girls: constructor) string[] | number[]){} getCat(index: number): string | number { return this.girls[index]; }} const SelectCat = new SelectCat([' I ', 'I ',' I ', SelectCat2<T> {constructor(private girls:) console.log(selectgirl.getcat (1)) T[]){} getGirl(index: number): T { return this.girls[index]; }} const SelectCat2 = new SelectCat2([' British short ', 'American short ',' Siam ']) console.log(selectcat2.getcat (1))Copy the code

summary

After a review of TypeScript, TypeScript is still relatively simple in general and can be used for basic development. However, concepts such as generics can be quite useful when you first encounter them.

reference

  • TypeScript tutorial
  • TypeScript goes from getting started to mastering video tutorials