https://github.com/rodrigoelp/syd-typescript-1
Have you ever tried to write a declaration/definition file in TypeScript and felt lost? Here I give you a basic introduction on what needs to be done to write a declaration file. Enjoy!
https://github.com/rodrigoelp/syd-typescript-1
declaration-files presentation typescript
Last synced: about 2 months ago
JSON representation
Have you ever tried to write a declaration/definition file in TypeScript and felt lost? Here I give you a basic introduction on what needs to be done to write a declaration file. Enjoy!
- Host: GitHub
- URL: https://github.com/rodrigoelp/syd-typescript-1
- Owner: rodrigoelp
- Created: 2019-02-19T07:24:21.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-20T03:18:00.000Z (over 7 years ago)
- Last Synced: 2025-05-13T19:22:12.387Z (about 1 year ago)
- Topics: declaration-files, presentation, typescript
- Language: JavaScript
- Homepage:
- Size: 17.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Define the world as your Oyster
Welcome to this repo!
Here you will find the code associated to the presentation "define the world as your oyster". A basic introduction to TypeScript declaration files and what do you need to know to contribute your definitions to the open source community.
## Understanding the sample code?
The code is structured as follows:
- `external/` folder contains two modules relevant to JavaScript code we want to expose to TypeScript.
- `external/calculator/` is a module called `calculator` (as defined in its `package.json`) meant to simulate an old JS library we had to reuse.
- `external/geometry/` is a module called `awesome-geometry` (as defined in its `package.json`) meant to simulate an external library we have no control over.
- `index.js` sample JavaScript content we are trying to replicate in TypeScript to be sure the type definition matches our intended purpose.
- `src/` contains the TypeScript files used in this demo. This folder was configured in the `tsconfig.json` file (included) as part of our source code.
- `src/types` folder configured to contain type definitions (as expressed in `tsconfig.json`)
Once you have `yarn`ed the code, you will notice the modules contained in the `extenal` folder will be copied into `node_modules` as configured in the `package.json` file. This is a way to host custom modules that aren't hosted or publically hosted (like github or npm packages).
Once the code has been compiled, you will end up with a `gen` folder, which is referenced in the `package.json` folder to execute your project.
## How do I run this sample code?
To run this code, you need to have `node` installed in your computer (as well as `yarn`, although you could rewrite the commands below to execute it via `npm`)
```sh
# Assuming you have `yarn` installed and you are running
# this code in a Mac (or bash terminal):
yarn # this will install dependencies
yarn run_js # this will output the execution of index.js
yarn run_ts # this will compile and execute index.ts
```
## Few questions
Here are a few questions raised during the presentation.
### Why define it as your oyster? Why did you call the presentation like this?
Because you will be in a position to take the opportunity life has to offer, reuse your code if that is what you want to do, write better code.
### If I want to write a declaration file for a public library/module, where do I start?
The best way to start is to look for an example, translate it to TypeScript and start implementing that interface. Otherwise, find the default export and every other export you will need to complete a working unit test and get that to work.
### Do I need to declare everything written in the JS file?
No, you just need to declare whatever is public and accessible to others. If there are private functions/variables or elements that have been repurposed (such as global constants that have been encapsulated in `enum` types) then don't declare it.
### Before you showed a declaration file (added below) with variables and functions... When you declared the module the declaration wasn't added, why?
```ts
// section of code, referenced in slide 19
declare var foo: number;
declare function bar(): string;
```
Well, when you declare a module, whatever exported is part of the declaration... basically, anything you are expressing in the module will be declared as soon as you exported; TypeScript is trying to help us removing that redundancy. Now... in the case where you declare just a variable or a function, you need to be aware that it belongs to a module but you decided not to access it. For instance, when using TypeScript in node the object `console` is not part of any definition. In that case you can just declare that object as:
```ts
declare var console: any; // effectively, a hack to tell TypeScript 'I know what I am doing calling `console`
```
Or, you could declare it as:
```ts
declare var console: {
log: (data: any) => void;
debug: (data: any) => void;
clear: () => void;
// whatever other method you use from console.
}
```
`console` will be available as a global variable, does not belong to a given module.
### Where can I find the slides (images)?
Uploaded to this repo [here](./presso/presso.md)