Typescript: Difference between revisions

From bibbleWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 33: Line 33:
</syntaxhighlight>
</syntaxhighlight>


= tsconfig =
= Configuration =
 
== tsconfig ==
You can set the options for the compiler you can specify a tsconfig.json file. By using  
You can set the options for the compiler you can specify a tsconfig.json file. By using  


Line 54: Line 56:
</syntaxhighlight>
</syntaxhighlight>


= Webpack Configuration =
== Webpack Configuration ==
The ts-loader module allows recompiling of the type script and you need to install it if using.
The ts-loader module allows recompiling of the type script and you need to install it if using.
<syntaxhighlight lang="bash">
<syntaxhighlight lang="bash">
Line 80: Line 82:
};
};
</syntaxhighlight>
</syntaxhighlight>
= Data Types =
The following types are available
* Boolean
* Number
* String
* Array
* Enum (not in javascript)
Don't use var but instead use <syntaxhighlight lang="typescript">let</syntaxhighlight> or <syntaxhighlight lang="typescript">const</syntaxhighlight>
== Webpack Configuration ==

Revision as of 03:09, 10 July 2020

Introduction

TypeScript is a typed language which produces javascript.

e.g.

let myString = "fred";
let myBoolean = true;

function createMessage(name:string) {

}

Typescript supports classes and access modifiers

class Person {
   
   name: string
   lastName: string
   
   public Person(name:string) {
       this.name = name;
   }

   public void setLastName(lastName: string) {
       this.lastName = lastName;
   }
}

Configuration

tsconfig

You can set the options for the compiler you can specify a tsconfig.json file. By using

tsc --init

you get a default file.

You can inherit tsconfigs from parent directories. This compiles all *.ts files in this directory and child directories.

{
  "extends": "../tsconfig.base",
  "compilerOptions": {
    "removeComments": true
  },
  "include": [
    "./**/*.ts"
  ]
}

Webpack Configuration

The ts-loader module allows recompiling of the type script and you need to install it if using.

module.exports = {
  entry: './app/app.ts',
  devtool: 'inline-source-map'
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', 'js']
  },
  output: {
    filename: 'bundle.js'
  },
  devServer: {
    inline: false
  }
};

Data Types

The following types are available

  • Boolean
  • Number
  • String
  • Array
  • Enum (not in javascript)

Don't use var but instead use

let

or

const

Webpack Configuration