Skip to content
GitLab
Projects Groups Topics Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • Angular Template Angular Template
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributor statistics
    • Graph
    • Compare revisions
  • Issues 1
    • Issues 1
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • IzeniIzeni
  • Angular TemplateAngular Template
  • Wiki
  • typescript

typescript · Changes

Page history
progress on typescript page authored Sep 22, 2016 by Mikkel Davis's avatar Mikkel Davis
Hide whitespace changes
Inline Side-by-side
typescript.md
View page @ faa755ec
* useful reference starting out https://www.typescriptlang.org/docs/handbook/basic-types.html
declare can be used to get around a libraries syntax that you dont have a chance to type.
### TypeScript
You want type enforcement in your javascript? Cuz this is how you get type enforcement in your javascript. Well, the compiled js actually doesn't end up with data typing, of course. All of the files in the ng2 template that would be `.js` are instead `.ts` and webpack is configured to run them through a typescript compiler, and if there is a problem with types it will yell at you, in a harsh, red voice. There are many IDE/editor plugins available for typescript; i.e. for Atom you're looking for `atom-typescript` which will run a compiler in the background and identify type errors and lint errors for you.
* ex) for lodash you have to do the following:
`declare let _ :any`
* ex) `declare var Window:any = window;`
On ngFor you must initialize to have an initial value:
*ex) private books: any = [{}];
#### Basics:
* useful reference starting out https://www.typescriptlang.org/docs/handbook/basic-types.html
* type a variable (declaration, parameter, etc) with a colon `let animalName: string = 'zebra';`
* type an intended function return value with a colon `function (param1: string): boolean {}`
* ideally, individual properties of objects are typed, using an interface or a class
- _if_ this is not feasible for some reason, go ahead and use the `any` type, sparingly
Need to check for initial values more often in general
#### Typings
Most any library has typings available, which will make the typescript compiler (tsc, webpack ts-loader, atom-typescript, etc) aware of necessary types. For example, defining types for global variables, like `setTimeout` or `_`
* these are kept in `<repo>/typings/` and listed in `typings.json`, so that when the npm postinstall script runs (see package.json), the `typings install` command has something to go off of, similar to the dependencies list in package.json
* to install a new typing and save it to typings.json at the same time, it looks like this: `typings install --save --global dt~lodash` (where lodash is the name of the particular typings package, in this case lodash. `global` doesn't mean the same thing it does with npm modules; you'll usually want the global flag when installing)
* the `declare` ts keyword is available for a variety of uses, including when there are issues with global variables
- i.e. at the top of a file where you want the variable `_` to be available put `declare let _: any;`
declare, typings `typings install dt~lodash`, tslint, r:any
\ No newline at end of file
#### tslint ([github/docs](https://github.com/palantir/tslint))
* webpack is configured to lint typescript files before compiling. You can even tell webpack to stop transpiling when it encounters a lint error or warning, leaving an incomplete, unusable bundle (useful for CI linting/testing)
* by default webpack and atom-typescript look for a `tslint.json` file for tslint rule settings. Add or remove rules as necessary/desired. You can also disable rules for individual lines or files at a time (see docs)
* there are a ton of js/es/ts rules available. [Here's the full list](http://palantir.github.io/tslint/rules/)
\ No newline at end of file
Clone repository
  • angular
  • cookbook forms
  • cookbook routing
  • data store
  • gotchas
  • Home
  • modals
  • sass with bem
  • toolbox
  • typescript
  • webpack