typescript 基本環境 搭建 | 類型

typescript 基本環境 搭建

工具

vs code

步驟

擴展-- 主題

One Dark Pro

npm  init
package.json
{
  "name": "client-side",
  "version": "1.0.0",
  "description": "source code of ts-learning",
  "main": "./src/index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "typescript",
    "source_code",
    "hequan"
  ],
  "author": "hequan <[email protected]>",
  "license": "MIT"
}

目錄

build
    webpack.config.js
package.json
src
    api  
    assets
            font
            img
    config  
    tools  
    utils
typings

安裝

npm install -g typescript  tslint  ts-loader   cross-env 
tsc --init

npm install  webpack  webpack-cli webpack-dev-server  clean-webpack-plugin    html-webpack-plugin  -D
npm install  typescript  -S

package.json

{
  "name": "client-side",
  "version": "1.0.0",
  "description": "source code of ts-learning",
  "main": "./src/index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"
  },
  "keywords": [
    "typescript"
  ],
  "author": "hequan<[email protected]>",
  "license": "MIT",
  "devDependencies": {
    "clean-webpack-plugin": "^2.0.0",
    "cross-env": "^5.2.0",
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^5.3.3",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "typescript": "^3.3.3333"
  }
}

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
    entry: "./src/index.ts",
    output: {
        filename: "main.js"
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',
    devServer: {
        contentBase: './dist',
        stats: 'errors-only',
        compress: false,
        host: 'localhost',
        port: 8089
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['./dist']
        }),
        new HtmlWebpackPlugin({
            template: './src/template/index.html'
        })
    ]
}

類型

let bool:boolean = false
let num:number = 123
let str:string
str = "abc"
str = `數值是${num}`

let arr1: number[] = [1,2,3]
let arr2: Array<number | string > = [1,2,3]
let arr3: (string | number)[] = ['a',2,'c']

let tuple: [string,number,boolean] = ['a',2,true]

// 枚舉
enum Roles {
    SUPER_ADMIN = 0,
    ADMIN,
    USER
}

// any類型
let value: any
value = "123"
const arr4: any[]=[1,'b']

// void類型

let v: void = undefined

const consoleText=(text: string): void =>{
    console.log(text)
}
consoleText("abc")

// null  undefined
let u: undefined = undefined
let n: null  = null

// never類型
const errorFunc = (message: string): never =>{
    throw new Error(message)
}
const infiniterFunc =():never =>{
    while(true){}
}
let neverVariable = (()=>{
    while(true){}
})

// object
let obj:object = {
    name : 'hequan',
}

// 類型斷言
const  getLength = (target:string | number) : number =>{
    if ((<string>target).length || (target as string).length === 0){
        return (<string>target).length
    }else{
        return target.toString().length
    }
}